<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>友金所-实名认证</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.0, user-scalable=no">
<link href="../../resources/css/pay.css" rel="stylesheet">
</head>
<body>
	<div class="pc-header">
		<!-- logo导航栏-->
		<div class="header_nav">
			<div class="header_nav-ctn">
				<div class="logo">
					<img class="logo-img" src="../../resources/images/yyfax-logo.png">
					<span class="logo-text">实名认证</span>
				</div>
			</div>
		</div>
		<!-- logo导航栏-->
	</div>
	<div class="yy-navbar ng-scope">
		<div class="navbar-row">
			<div class="navbar-left">
				<a class="btn-back" ng-click="goBackClick()">
					<i class="arrow_border_icon arrow_left"></i><span>返回</span>
				</a>
			</div>
			<div class="navbar-title navbar-center">
				<span class="ng-binding" ng-bind="pageTitle">实名认证</span>
			</div>
			<div class="navbar-right">
				<a class="support-bank" ui-sref="suppotBankList" rel="支持银行">支持银行</a>
			</div>
		</div>
	</div>
	<div class="contain-main">			
		<form class="progress-content" id="form1" action="#">
			<input type="hidden" id="payOrderId" name="payOrderId" value="${payOrderId}"/>
			<input type="hidden" id="merchantCode" name="merchantCode" value="${merchantCode}" />
			<input type="hidden" name="idNo" value="${idNo}" />
			<input type="hidden" name="name" value="${name}" />
			<input type="hidden" name="cardNo" value="${cardNo}" />
			<input type="hidden" id="sign" name="sign" value="${sign}" />
			<input type="hidden" id="cardBinSign" name="cardBinSign" value="${cardBinSign}" />
			
			<ul>
				<li>
					<span><label>*</label>身份证号</span>
					<span>
						<#if idNo??>
						<input id="formIdNo" name="formIdNo" type="text" placeholder="身份证号" value="${idNo}" readonly>
						<#else>
						<input id="formIdNo" name="formIdNo" type="text" placeholder="身份证号" value="${idNo}">
						</#if>
					</span>
					<span class="input-tips"></span>
				</li>
				<li>
					<span><label>*</label>姓名</span>
					<span>
						<#if name??>
						<input id="formName" name="formName" type="text" placeholder="姓名" value="${name}" readonly>
						<#else>
						<input id="formName" name="formName" type="text" placeholder="姓名" value="${name}">
						</#if>
					</span>
					<span class="input-tips"></span>
				</li>
				<li>
					<span><label>*</label>银行卡号</span>
					<span>
						<#if cardNo??>
						<input id="formCardNo" name="formCardNo" type="text" placeholder="银行卡号" value="${cardNo}" readonly>
						<#else>
						<input id="formCardNo" name="formCardNo" type="text" placeholder="银行卡号" value="${cardNo}">
						</#if>
						
						<span class="limitTable_Btn" style="margin-left: 10px;text-decoration: none;cursor:pointer;">查看支持的银行&gt;&gt;</span>
					</span>
					<span class="input-tips"></span>				
				</li>
				<li>
					<span><label>*</label>银行名称</span>
					<span><input id="bankName" name="bankName" type="text" placeholder="银行名称" disabled></span>
					<input name="bankCode" id="bankCode" type="hidden" />
					<span class="input-tips"></span>	
				</li>
			</ul>
			<span class="tips"></span>			
			<a class="sub-btn disabled" id="sub" href="javascript:void(0)"><span class="inner-loading"><img src="../../resources/images/loading.gif" alt="loading"></span>提交</a>
		</form>
	</div>
	<div style="display: none;">
		<form id="form2" method="post"></form>
	</div>
	<div class="cover-wrap limitTable-dialog" style="display: none;">
		<div class="content-box borders deposit limitTable">
			<span class="closeBtn"></span>
			<p>支持银行</p>
			<ul class="limitBankList" id="pcLimitTable">                    
				<li class="bankItem">
					<i class="bankIcon ABC"></i>
					<span class="bankName">农业银行</span>
					<span class="bankLimit">单笔限额5万，单日限额10万，单月限额200万</span>
				</li>
				
				<li class="bankItem">
					<i class="bankIcon ICBC"></i>
					<span class="bankName">工商银行</span>
					<span class="bankLimit">单笔限额5万，单日限额5万，单月限额150万</span>
				</li>
			</ul>
			<p class="closeBtn knewBtn">我知道了</p>
		</div>
	</div>
	<div class="h5-limitTable" style="display:none;">
		<ul class="limitBankList" id="mobileLimitTable">
			<li class="mobile-bankItem">
				<i class="bankIcon ABC"></i>
				<span class="bankName ng-binding">农业银行</span>
				<span class="bankLimit ng-binding">限额 单笔5万，单日10万，单月200万</span>
			</li>		
			<li class="mobile-bankItem">
				<i class="bankIcon ICBC"></i>
				<span class="bankName ng-binding">工商银行</span>
				<span class="bankLimit ng-binding">限额 单笔5万，单日5万，单月150万</span>
			</li>
		</ul>
	</div>
	<script src="../../resources/js/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script src="../../resources/js/common.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			$.ajax({
				type:'post',
				dataType: 'Json',
				url:'${ctx}/common/api/bank_quota/query_list',
				data:{
					merchantCode:$('input[name="merchantCode"]').val()
				}
			}).then(function(data){
				if(data.code===0){
					var ctn = data.content;
					var limitH5='';
					var limitPC='';
					for(var i=0;i<ctn.list.length;i++){
						var item = ctn.list[i];
						var singleQuota = item.singleQuota=='null'?'无限额':((item.singleQuota/1000000).toFixed(0)+'万');
						var dayQuota = item.dayQuota=='null'?'无限额':((item.dayQuota/1000000).toFixed(0)+'万');
						var monthQuota =item.monthQuota=='null'?'无限额':((item.monthQuota/1000000).toFixed(0)+'万');
						limitH5+='<li class="bankItem"><i class="bankIcon '+item.enName.toUpperCase()+'"></i><span class="bankName">'+item.bankName+'</span>'+
						'<span class="bankLimit">单笔限额'+singleQuota+'，单日限额'+dayQuota+'，单月限额'+monthQuota+'</span></li>';
						limitPC+='<li class="mobile-bankItem"><i class="bankIcon '+item.enName.toUpperCase()+'"></i><span class="bankName">'+item.bankName+'</span>'+
						'<span class="bankLimit">限额 单笔'+singleQuota+'，单日'+dayQuota+'，单月'+monthQuota+'</span></li>';
					}
					$('#pcLimitTable').html(limitH5);
					$('#mobileLimitTable').html(limitPC);
				}else{
					// util.showErrMsg('网络异常,请稍后重试'||data.display);
					console.log('获取限额表失败')
				}
			},function(){
			})
			
			$('input[type="text"]').blur(function(){
				var textValue  = $.trim($(this).val());
				$(this).val(textValue);
			});

			$('#sub').click(function() {
				if($(this).hasClass('busy')){
					return;
				}
				
				var $name = $('#formName');
				var $idNo = $('#formIdNo');
				var $cardNo = $('#formCardNo');

				if(!$name.val()){
					util.showErrMsg('姓名不能为空');
					return 
				} else if($name.val().length>20){
					util.showErrMsg('姓名长度不可超过20位');
					return
				}
				if(!$idNo.val()){
					util.showErrMsg('身份证号不能为空');
					return 
				}
				if(!$cardNo.val()){
					util.showErrMsg('银行卡号不能为空');
					return 
				}
				$(this).addClass('busy');
				$.ajax({
					url : "${ctx}/api/pay/real_name/confirm",
					data : $("#form1").serialize(),
					type : "post",
					success : function(data) {//ajax返回的数据
						var json = JSON.parse(data);
					
						if(json.code == 0){
							$("#form2").attr("action",json.content.url)
							//解析返回参数
							$.each(json.content.form,function(name,value){
								var input ="<input type='hidden' name='"+name+"' value='"+value+"' >"; 
								$("#form2").append(input);
							});
						
							$("#form2").submit();
						}else{
							util.showMsg(json.display);
						}					
						$('#sub').removeClass('busy');
					},
					error: function() {
						util.showErrMsg('网络异常，请稍后重试');
						$('#sub').removeClass('busy');
					}
				}).always(function(){
					$('#sub').removeClass('busy');
				});;
			});
			
			var bankCardCache = '';
			$('#formCardNo').blur(function(){
				if($(this).val()!==bankCardCache){
					queryBank();
				}
			})
			if($('#formCardNo').val()){
				$('#formCardNo').blur();
			}
			function queryBank() {
				var queryVal="merchantCode="+$("#merchantCode").val()+"&payOrderId="+ $("#payOrderId").val()+"&sign="+$("#cardBinSign").val() +"&cardNo="+$("#formCardNo").val()
				$.ajax({
					url : "${ctx}/common/api/card_bin/query?"+queryVal,
					data : $("#form1").serialize(),
					contentType: "application/json;charset=utf-8",
					dataType: 'Json',
					type : "post",
					success : function(data) {//ajax返回的数据
						bankCardCache = $('#formCardNo').val();
						if(data.code == 0){
							bankName =data.content.bankName;
							//$("#bankCode").val(json.content.bankCode);
							$("#bankName").val(bankName);
						}else{
							util.showMsg(data.display||'网络异常，请稍后重试');
						}
					},
					error: function() {
						util.showErrMsg('网络异常，请稍后重试');
					}
				});
			}
			$('.limitTable_Btn').click(function(){
				var height = 575;
				if($(window).height()<800){
					height=320
				}
				$('.limitTable-dialog').find('.limitBankList').height(height).end().show();
			});
			$('.knewBtn').click(function(){
				$('.limitTable-dialog').hide();
			});
			$('.support-bank').click(function(){
				$('.h5-limitTable').show();
			});
			$('.btn-back').click(function(){
				event.preventDefault();
				if($('.h5-limitTable').css('display')==='block'){
					$('.h5-limitTable').hide();
					return false;
				}else{
					history.go(-1);
				}
			});

		});
	</script>
</body>
</html>